<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/memenu.js"></script>
		<link href="css/templatemo_style.css" rel="stylesheet" type="text/css">
		<script>
			$(document).ready(function() {
				$(".memenu").memenu();
			});
		</script>
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<title>登录</title>
		<style>
			body {
				
				background-image: url(image/background3.jpg);
				background-size: cover;
			}
			
			.load-center {
				width: 50%;
				height: 70%;
				border-radius:20px;
				margin-left: 25%;
				margin-top: 80px;
				background-image: url(image/ba2.jpg);
				background-size: cover;
				box-shadow: 10px 0px 40px #eaf7f7, 0px 10px 40px #eaf7f7;
			}
			
			.load-image {
				margin-left: 100px;
				margin-top: 30px;
				width: 60%;
				/*height:60%;*/
			}
			
			.end-load {
				padding-top: 130px;
				padding-left: 35%;
				color: gray;
				font-weight: normal;
			}
			
			.end-load a {
				font-size: 16px;
				color: black;
			}
			
			.end-load a:hover {
				text-decoration: none;
				color: black;
			}
			
			.load-container {
				margin: 0 auto;
				padding: 30px;
			}
			
			.load-denglu {
			margin-left: 100px;
				display: inline-block;
				padding: 7px 10px;
				margin-bottom: 0;
				font-size: 18px;
				background: #0075D5;
				font-weight: normal;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				-ms-touch-action: manipulation;
				touch-action: manipulation;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border: 1px solid transparent;
				border-radius: 4px;
			}
		</style>
		<script>
			function check() {
				var name = document.getElementById("username").value;
				var pwd = document.getElementById("password").value;
				var verify = document.getElementById("verify").value;
				if(name == "") {
					document.getElementById("inf_name").innerHTML = "请输入用户名";
					return false;
				}
				if(pwd == "") {
					document.getElementById("inf_pwd").innerHTML = "请输入密码";
					return false;
				}
				if(verify == "") {
					document.getElementById("inf_verify").innerHTML = "请输入验证码";
					return false;
				}
				var inputCode = document.getElementById("verify").value.toUpperCase(); //中间名字为输入验证码框的id
				if(inputCode.length <= 0) {
					alert("请输入验证码！");
					return false;
				} else if(inputCode != code) {
					alert("验证码输入错误！");
					//createCode(); 
					draw('canvas');
					return false;
				} else {
					return true;
					//$("#submitForm").attr("action", "feedAction!getAll.action").submit(); 

				}
			}
		</script>

		<script type="text/javascript">
			var code //在全局 定义验证码 
			function createCode() {
				code = "";
				var codeLength = 4; //验证码的长度  
				var checkCode = document.getElementById("canvas");
				checkCode.value = "";
				var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
				for(var i = 0; i < codeLength; i++) {
					var charIndex = Math.floor(Math.random() * 32);
					code += selectChar[charIndex];
				}
				if(code.length != codeLength) {
					createCode();
				}
				checkCode.value = code;
			}
			//canvas创建

			function draw(id) {
				var canvas = document.getElementById(id);
				var a, b, c, color;
				var d = -10;
				if(canvas == null)
					return false;
				var context = canvas.getContext("2d");
				createCode(); //调用函数生成验证码
				context.fillStyle = "#86D149"; //填充颜色，背景颜色
				context.fillRect(0, 0, 100, 35); //画矩形
				for(i = 0; i < 4; i++) //通过循环实现各个字体颜色和格式设置
				{
					a = Math.floor(Math.random() * 256);
					b = Math.floor(Math.random() * 256);
					c = Math.floor(Math.random() * 256);
					d = d + 20; //设置文字坐标，左上角为坐标原点
					color = "rgb(" + '' + a + "," + b + "," + c + ")"; //拼接字符串,"rgb(a,b,c)";
					context.fillStyle = color; //字体颜色  "rgb(a,b,c)";
					context.strokeStyle = color; //字体阴影颜色
					context.font = "italic 23px sans-serif"; //字体样式设置 样式和大小
					context.textBaseline = "top"; //对齐方式
					context.fillText(code[i], d, 10); //填充字符创
					context.strokeText(code[i], d, 10); //轮廓字符串
				}
			}

			//验证方法，登录时调用
			function validate() {
				var inputCode = document.getElementById("verify").value.toUpperCase(); //中间名字为输入验证码框的id
				if(inputCode.length <= 0) {
					alert("请输入验证码！");
					return false;
				} else if(inputCode != code) {
					alert("验证码输入错误！");
					//createCode(); 
					draw('canvas');
					return false;
				} else {
					return true;
					//$("#submitForm").attr("action", "feedAction!getAll.action").submit(); 

				}
			}

			function resetpwd() {
				var pwd1 = document.getElementById("password1").value;
				var pwd2 = document.getElementById("password2").value;
				if(pwd1 != pwd2) {

					document.getElementById("testpwd").innerHTML = "*密码有误，请重设！*";
					return false;
				} else
					return true;
			}
		</script>
		<script>
			$(function() {
				$("[data-toggle='tooltip']").tooltip();
			});
		</script>
	</head>

	<body onload="draw('canvas')">
		<div class="load-center">
			<img src="image/logo-1.png" class="load-image" />
			<div class="modal-body">
				<!--modal body start-->
				<form class="form-horizontal load-container templatemo-login-form-1 margin-bottom-30" role="form" action="feedAction!getAll.action" method="post" id="submitForm" onsubmit="return check();">
					<div class="form-group">
						<div class="col-xs-12">
							<div class="control-wrapper">
								<label for="username" class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
								<input type="text" class="form-control" id="username" name="username" placeholder="用户名">
								<span id="inf_name"></span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="control-wrapper">
								<label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
								<input type="password" class="form-control" id="password" name="password" placeholder="密码">
								<span id="inf_pwd"></span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="control-wrapper">
								<label>用户类型：</label>
								<!--<select>
						            		<option>学生</option>
						            		<option>教师</option>
						            		<option>管理员</option>
						            	</select>-->
								<label><input type="radio" id="student" name="usertype" checked="checked" />学生</label>&nbsp;&nbsp;&nbsp;&nbsp;
								<label><input type="radio" id="admin"  name="usertype"/>管理员</label>&nbsp;&nbsp;&nbsp;&nbsp;
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<div class="testbox control-wrapper">

								<div class="verifyimg">
									<canvas id="canvas" width="100px" height="50px">
					                            </canvas>
									<a id="" href="javascript:draw('canvas')" class="change">看不清,换一张</a>
								</div>
								<label>
					                  		<input type="text" class="form-control" id="verify" name="verify" placeholder="验证码">
				                		</label>
								<span id="inf_verify"></span>
							</div>
						</div>
					</div>
					<div class="form-group"><a href="feedAction!getAll.action"><button class="btn btn-default">登录</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">忘记密码</a></div>
			</div>

		</div>
		<p class="end-load">
			<a href="http://www.henu.edu.cn/">河南大学</a>软件学院蒲公英工作室&nbsp;&nbsp;Copyright &copy;&nbsp;&nbsp;2016www.henu.edu.cn&nbsp;&nbsp;&nbsp;&nbsp;</p>
	</body>

</html>